<template>
    <div>
        <h2 class="h2"><span>军籍信息表--退役士兵</span></h2>
        <div>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="140px" class="demo-ruleForm junjixinxibiao" id="junjixinxibiao" accept-charset="UTF-8">
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="入伍时间：" prop="D001">
                            <el-date-picker v-model="ruleForm.D001" type="date" placeholder="入伍时间"></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="退役时间：" prop="D002">
                            <el-date-picker v-model="ruleForm.D002" type="date" placeholder="退役时间"></el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="原部队代号：" prop="D003">
                            <el-input v-model="ruleForm.D003" id="D003" placeholder="请输入原部队代号（不填番号）"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="退役证件名称：" prop="D004">
                            <el-input v-model="ruleForm.D004" id="D004" placeholder="请输入退役证件名称"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                   <el-col :span="12">
                        <el-form-item class="select2" label="退役证件：" prop="D005">
                            <el-select v-model="ruleForm.D005" placeholder="请选择退役证件">
                                <el-option label="原件" value="原件"></el-option>
                                <el-option label="证明材料" value="证明材料"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="退役证件号码：" prop="D006">
                            <el-input v-model="ruleForm.D006" id="D006" placeholder="请输入退役证件号码"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item class="select2" label="原衔级：" prop="D007">
                            <el-select v-model="ruleForm.D007" placeholder="请选择原衔级">
                                <el-option label="志愿兵" value="志愿兵"></el-option>
                                <el-option label="高级士官" value="高级士官"></el-option>
                                <el-option label="中级士官" value="中级士官"></el-option>
                                <el-option label="初级士官" value="初级士官"></el-option>
                                <el-option label="义务兵" value="义务兵"></el-option>
                            </el-select>            
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item class="select2" label="入伍时户籍性质：" prop="D008">
                            <el-select v-model="ruleForm.D008" placeholder="请选择入伍时户籍性质">
                                <el-option label="城镇" value="城镇"></el-option>
                                <el-option label="农村" value="农村"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-form-item>
                        <el-button type="primary" @click="fallbackFn()">上一步</el-button>
                        <el-button type="primary" @click="submitForm('ruleForm')">下一步</el-button>
                        <el-button @click="resetForm('ruleForm')">重置</el-button>
                    </el-form-item>
                </el-row>
            </el-form>
        </div>
    </div>
</template>

<script>
import interface_s from '@/api/api.js'
export default {
    data(){
        return {
            ruleForm: { //默认数据
                D001:'',//入伍时间
                D002:'',//退役时间
                D003:'',//原部队代号
                D004:'',//退役证件名称
                D005:'',//退役证件
                D006:'',//退役证件号码
                D007:'',//原衔级
                D008:'',//入伍时户籍性质
                userID:this.$cookies.get('userID'),
            },
            rules: {  //规则
                D001:[
                    { required: true, message: '请选择入伍时间', trigger: 'change' }
                ],
                D002:[
                     { required: true, message: '请选择退役时间', trigger: 'change' }
                ],
                D004:[
                    { required: true, message: '请填写退役证件名称', trigger: 'blur' },
                ],
                D005:[
                    { required: true, message: '请填写退役证件', trigger: 'change' },
                ],
                D006:[
                    { required: true, message: '请填写退役证件号码', trigger: 'blur' },
                ],
                D007:[
                    { required: true, message: '请填写原衔级', trigger: 'change' },
                ],
                D008:[
                    { required: true, message: '请填写入伍时户籍性质', trigger: 'change' },
                ]
            },
        }
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => { //junjixinxi
                if (valid) {
                    // alert('成功，tuiyishibing!');
                    console.log(this.ruleForm)

                    let postData = this.$qs.stringify(this.ruleForm);
                    console.log(postData)
                    // 基本信息提交
                    this.$axios.post(this.HOST+interface_s.junjixinxi,postData,{
                        headers:{
                            'Content-Type':'application/x-www-form-urlencoded', 
                        }
                    })
                    .then( (response) => {
                        if(response.data.code==0){
                            this.$alert('填写成功！', '消息', {
                                confirmButtonText: '确定',
                                callback: action => {
                                    this.$emit('submitfn',5)
                                }
                            })
                        }else{
                            this.$alert('信息填写错误或网络错误', '消息', {
                                confirmButtonText: '确定',
                                callback: action => {
                                   
                                }
                            })
                        }
                        console.log(response);
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        hujisuozaidifnsss(value){
            console.log(value)
            this.hujisuozaidiData = value
        },
        hujisuozaidifnsss2(value){
            console.log(value)
        },
        fallbackFn(){
            this.$confirm('您确定返回上一层吗？如果反回此处得重新填写', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$emit('submitfn',3)
            }).catch(() => {
                //取消
            });
        }
    },
    components:{
        
    },
    created(){
        let datas =  JSON.parse(sessionStorage.getItem('data'));
        if(datas){
            this.ruleForm.D001 = datas.d001
            this.ruleForm.D002 = datas.d002
            this.ruleForm.D003 = datas.d003
            this.ruleForm.D004 = datas.d004
            this.ruleForm.D005 = datas.d005
            this.ruleForm.D006 = datas.d006
            this.ruleForm.D007 = datas.d007
            this.ruleForm.D008 = datas.d008
        }
    }
}
</script>

<style scoped>
.el-row {
    margin-bottom: 20px;
}
.el-row:last-child {
    margin-bottom: 0;
}
</style>